<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js.js"></script>
    <title>Todolist</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        border-collapse: collapse;
    }
    
    body {
        background-image: url("bj.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .box {
        width: 1000px;
        height: 400px;
        margin: 0 auto;
        margin-top: 10px;
        position: relative;
        /*border: 1px solid white;*/
        border-radius: 40px;
        overflow: hidden;
    }
    
    .title {
        width: 1000px;
        margin: 0 auto;
        margin-top: 60px;
    }
    
    h1 {
        color: white;
        margin-left: 50px;
        font-size: 60px;
        /*font-style: italic;*/
        letter-spacing: 10px;
        color: #fafafa;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
    }
    
    .nav {
        width: 200px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.3);
        position: absolute;
        left: 0;
    }
    
    .nav li {
        text-align: center;
        padding: 20px 0 20px 0;
        margin-bottom: 30px;
        margin-top: 30px;
        border: 1px solid white;
        cursor: pointer;
        font-size: 28px;
        color: #34495e;
        letter-spacing: 10px;
    }
    
    .nav li:hover {
        color: white;
        background-color: black;
    }
    
    .content {
        color: white;
        width: 800px;
        height: 400px;
        background-color: rgba(255, 0, 0, 0.3);
        position: absolute;
        left: 200px;
        border-left: 1px solid white;
        overflow: scroll;
    }
    
    .content table {
        width: 800px;
        margin: 0 auto;
        margin-top: 20px;
    }
    
    .content table th,
    td {
        border: 1px solid white;
        text-align: center;
        width: 300px;
        height: 30px;
        position: relative;
    }
    
    .star {
        background-image: url("star.png");
        width: 32px;
        height: 32px;
        float: left;
        cursor: pointer;
    }
    
    .butt {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 750px;
    }
    
    .butt .btn-xs,
    .butt .btn-xf {
        float: right;
    }
    
    .butt .btn-ss,
    .butt .btn-sf {
        float: left;
    }
    
    form {
        width: 950px;
        margin: 0 auto;
        margin-top: 20px;
        display: none;
        color: white;
    }
    
    .input {
        position: absolute;
        left: 0;
        top: 0;
        width: 148px;
        height: 28px;
    }
    
    .miss {
        margin-left: 10px;
    }
    
    button {
        cursor: pointer;
    }
</style>

<body>
    <div class="title">
        <h1>任务列表</h1>
    </div>
    <div class="box">
        <ul class="nav">
            <li class="sheet">
                <strong>主页</strong>
            </li>
            <li class="file">
                <strong>归档</strong>
            </li>
            <li class="addd">
                <strong>添加</strong>
            </li>
        </ul>
        <div class="content">
            <table>
                <thead>
                    <th>任务名字</th>
                    <th>截止日期</th>
                    <th>重要程度</th>
                    <th>完成情况</th>
                    <th>具体操作</th>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="no-message">没有数据</div>
            <div class="butt">
                <button class="btn-ss">上一页</button>
                <button class="btn-xs">下一页</button>
            </div>
            <div class="butt">
                <button class="btn-sf">上一页</button>
                <button class="btn-xf">下一页</button>
            </div>
        </div>
    </div>
    <form>
        <label>任务名字</label><input type="text" class="task-name">
        <label>截止日期</label><input type="text" class="task-time">
        <label>重要程度</label><input type="text" class="task-star">
        <label>完成情况</label><select class="task-finish">
            <option>未完成</option>
            </select>
        <button class="btn-add">增加</button><button class="miss">取消</button>
    </form>
</body>

</html>